<template>
  <div>
    <header>
      <h1>新中国成立前奏</h1>
    </header>
    <Sidebar></Sidebar>
    <nav>
      <ul>
        <li><a href="/">主页</a></li>
        <li><a href="/home2">首页</a></li>
        <li><a href="/founding">新中国成立经过</a></li>
        <li><a href="/significance">新中国成立意义</a></li>
      </ul>
    </nav>
    <main>
      <!-- 第一列事件模块 -->
      <div class="event-column">
        <div class="event-module"
             :style="{ transform: moduleTransform, transition: 'transform 0.3s ease' }"
             @mouseenter="handleMouseEnterModule('event-module-1')"
             @mouseleave="handleMouseLeaveModule('event-module-1')">
          <img src="/images/5001.jpg" alt="七届二中全会召开图片" class="event-image"
               :style="{ width: imageWidth + 'px', height: imageHeight + 'px', transition: 'width 0.3s ease, height 0.3s ease' }"
               @mouseenter="handleMouseEnterImage('event-image-1')"
               @mouseleave="handleMouseLeaveImage('event-image-1')">
          <div class="event-text" style="width: calc(100% - 220px);">
            <h3 style="font-size: 16px;">七届二中全会召开</h3>
            <p style="font-size: 14px; line-height: 1.5; color:orange;" >
              1949年3月，在中国革命即将取得全国胜利的前夕，中国共产党在西柏坡召开了七届二中全会。
              <br>毛泽东在会议上提出了促进革命迅速取得全国胜利和组织这个胜利的各项方针；说明了在全国胜利的局面下，党的工作重心必须由乡村转移到城市，城市工作必须以生产建设为中心；规定了党在全国胜利后，在政治、经济、外交方面应当采取的基本政策，以及使中国由农业国转变为工业国、由新民主主义社会转变为社会主义社会的总任务和主要途径。
              <br>此次会议为党的工作重心转移等做了充分准备。
            </p>
          </div>
        </div>
        <div class="event-module"
             :style="{ transform: moduleTransform, transition: 'transform 0.3s ease' }"
             @mouseenter="handleMouseEnterModule('event-module-2')"
             @mouseleave="handleMouseLeaveModule('event-module-2')">
          <img src="/images/5002.png" alt="“五一口号”发布图片" class="event-image"
               :style="{ width: imageWidth + 'px', height: imageHeight + 'px', transition: 'width 0.3s ease, height 0.3s ease' }"
               @mouseenter="handleMouseEnterImage('event-image-2')"
               @mouseleave="handleMouseLeaveImage('event-image-2')">
          <div class="event-text" style="width: calc(100% - 220px);">
            <h3 style="font-size: 16px;">“五一口号”发布</h3>
            <p style="font-size: 14px; line-height: 1.5;color:orange;">
              1948年4月30日，中共中央发布“五一口号”，号召“各民主党派、各人民团体、各社会贤达迅速召开政治协商会议，讨论并实现召集人民代表大会，成立民主联合政府”。
              <br>这一号召得到各民主党派、无党派民主人士的热烈响应，他们纷纷奔赴解放区，与中国共产党共商建国大计。
              <br>标志着各民主党派和无党派民主人士公开、自觉地接受中国共产党的领导，是多党合作和政治协商制度形成的重要里程碑。
            </p>
          </div>
        </div>
      </div>
      <!-- 第二列事件模块 -->
      <div class="event-column">
        <div class="event-module"
             :style="{ transform: moduleTransform, transition: 'transform 0.3s ease' }"
             @mouseenter="handleMouseEnterModule('event-module-3')"
             @mouseleave="handleMouseLeaveModule('event-module-3')">
          <img src="/images/5003.png" alt="人民解放军占领南京图片" class="event-image"
               :style="{ width: imageWidth + 'px', height: imageHeight + 'px', transition: 'width 0.3s ease, height 0.3s ease' }"
               @mouseenter="handleMouseEnterImage('event-image-3')"
               @mouseleave="handleMouseLeaveImage('event-image-3')">
          <div class="event-text" style="width: calc(100% - 220px);">
            <h3 style="font-size: 16px;">人民解放军占领南京</h3>
            <p style="font-size: 14px; line-height: 1.5;color:orange;">
              1949年4月24日凌晨，人民解放军占领南京总统府，宣告了延续22年的国民党反动统治的覆灭。
              <br>这一事件标志着中国新民主主义革命取得了基本胜利，为新中国的成立奠定了坚实基础，极大地鼓舞了全国人民的革命斗志，让新中国的诞生更加可期。
            </p>
          </div>
        </div>
        <div class="event-module"
             :style="{ transform: moduleTransform, transition: 'transform 0.3s ease' }"
             @mouseenter="handleMouseEnterModule('event-module-4')"
             @mouseleave="handleMouseLeaveModule('event-module-4')">
          <img src="/images/5004.png" alt="中国人民政治协商会议筹备图片" class="event-image"
               :style="{ width: imageWidth + 'px', height: imageHeight + 'px', transition: 'width 0.3s ease, height 0.3s ease' }"
               @mouseenter="handleMouseEnterImage('event-image-4')"
               @mouseleave="handleMouseLeaveImage('event-image-4')">
          <div class="event-text" style="width: calc(100% - 220px);">
            <h3 style=" font-size: 16px;">中国人民政治协商会议筹备</h3>
            <p style="font-size: 14px; line-height: 1.5;color:orange;">
              随着解放战争的基本胜利，建立新中国的各项筹备工作紧锣密鼓地展开。
              <br>众多民主人士汇聚，共同商讨新中国成立的各项事宜，包括制定相关纲领、确定政府架构等，为中国人民政治协商会议第一届全体会议的顺利召开奠定了基础，是新中国成立筹备过程中的重要环节。
            </p>
          </div>
        </div>
      </div>
      <!-- 第三列事件模块 -->
      <div class="event-column">
        <div class="event-module"
             :style="{ transform: moduleTransform, transition: 'transform 0.3s ease' }"
             @mouseenter="handleMouseEnterModule('event-module-5')"
             @mouseleave="handleMouseLeaveModule('event-module-5')">
          <img src="/images/5005.png" alt="公安部队加强北平安保图片" class="event-image"
               :style="{ width: imageWidth + 'px', height: imageHeight + 'px', transition: 'width 0.3s ease, height 0.3s ease' }"
               @mouseenter="handleMouseEnterImage('event-image-5')"
               @mouseleave="handleMouseLeaveImage('event-image-5')">
          <div class="event-text" style="width: calc(100% - 220px);">
            <h3 style="font-size: 16px;">公安部队加强北平安保</h3>
            <p style=" font-size: 14px; line-height: 1.5;color:orange;">
              在开国大典临近之际，蒋介石集团妄图破坏。北平公安部门高度警觉，加强安保工作。
              <br>公安人员通过细致侦查，如发现异常的烟头、皮鞋印等线索，成功破获特务阴谋，抓获多名特务，有力保障了开国大典的安全举行，凸显了当时安保工作的重要性和公安人员的英勇。
            </p>
          </div>
        </div>
        <div class="event-module"
             :style="{ transform: moduleTransform, transition: 'transform 0.3s ease' }"
             @mouseenter="handleMouseEnterModule('event-module-6')"
             @mouseleave="handleMouseLeaveModule('event-module-6')">
          <img src="/images/5003.png" alt="人民空军筹建起步图片" class="event-image"
               :style="{ width: imageWidth + 'px', height: imageHeight + 'px', transition: 'width 0.3s ease, height 0.3s ease' }"
               @mouseenter="handleMouseEnterImage('event-image-6')"
               @mouseleave="handleMouseLeaveImage('event-image-6')">
          <div class="event-text" style="width: calc(100% - 220px);">
            <h3 style=" font-size: 16px;">人民空军筹建起步</h3>
            <p style=" font-size: 14px; line-height: 1.5;color:orange;">
              1949年初，建立人民空军被提上日程。3月成立军委航空局，开展接收相关设备、人员等工作。
              <br>8月赴莫斯科商谈合作事宜并签订协议，9月飞行队成立并担负防空等任务。
              <br>人民空军的筹建为新中国国防建设奠定了重要基础，开启了我国空军发展的征程。
            </p>
          </div>
        </div>
      </div>
    </main>
    <footer>
      &copy; 2024 新中国成立史网页版权所有
    </footer>
  </div>
</template>

<script>
import Sidebar from './Sidebar.vue';
import Feature from './Feature.vue';
export default {
  name: 'PreludeView',
  components: {
    Feature,
    Sidebar
  },
  data() {
    return {
      featureTitle: '主要特征',
      featureDescription: '中华人民共和国的成立，彻底结束了旧中国半殖民地半封建社会的历史，彻底结束了旧中国一盘散沙的局面，彻底废除了列强强加给中国的 不平等条约 和 帝国主义 在中国的一切特权，实现了中国从几千年封建专制统治向 人民民主 的伟大飞跃，实现了中国高度统一和各民族空前团结。',
      // 初始图片宽度和高度
      imageWidth: 200,
      imageHeight: 150,
      // 鼠标悬停时放大后的图片宽度和高度
      enlargedWidth: 300,
      enlargedHeight: 200,
      // 模块初始的变换样式（无变换）
      moduleTransform: 'scale(1)',
      // 模块放大后的变换样式
      enlargedModuleTransform: 'scale(1.1)'
    };
  },
  methods: {
    handleMouseEnterModule(moduleId) {
      this.moduleTransform = this.enlargedModuleTransform;
    },
    handleMouseLeaveModule(moduleId) {
      this.moduleTransform = 'scale(1)';
    },
    handleMouseEnterImage(imageId) {
      if (imageId === 'event-image-1') {
        this.imageWidth = this.enlargedWidth;
        this.imageHeight = this.enlargedHeight;
      } else if (imageId === 'event-image-2') {
        // 针对不同图片ID设置相应的放大逻辑，这里省略其他图片ID的具体判断，可根据实际情况补充完整
        this.imageWidth = this.enlargedWidth;
        this.imageHeight = this.enlargedHeight;
      }
      //... 其他图片ID的判断逻辑
    },
    handleMouseLeaveImage(imageId) {
      if (imageId === 'event-image-1') {
        this.imageWidth = 200;
        this.imageHeight = 150;
      } else if (imageId === 'event-image-2') {
        // 针对不同图片ID设置相应的还原逻辑，这里省略其他图片ID的具体判断，可根据实际情况补充完整
        this.imageWidth = 200;
        this.imageHeight = 150;
      }
      //... 其他图片ID的判断逻辑
    }
  }
}
</script>
<style scoped>
@import url('../CSS/main.css');
</style>
<style scoped>
/* 在这里添加CSS样式 */
header, nav, main, footer {
  margin: 10px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

/* 新增的事件模块相关样式 */
.event-column {
  display: flex;
  flex-direction: column;
  width: 60%;
}

.event-module {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.event-image {
  margin-right: 10px;
}

.event-text {
  flex: 1;
}
</style>